// pages/active_detail/detail.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    // latitude: 30.674153,   // 默认纬度
    // longitude: 111.185151, // 默认经度
    // 地图中心点的位置经纬度
    latitude: 30.674084, // 标注点的纬度
    longitude: 111.184761, // 标注点的经度
    active_id: '',
    active_info: {},
    active_name: '',
    user_id: '',
    // 标注点数据
    // 地图上可以显示多个标注点，每个标注点的位置、图标和提示内容可能不同。
    markers: [{
      // 每个标注点都有一个唯一的 id，用于区分不同的标注点。
      id: 1, // 标注点的唯一标识
      latitude: 30.674084, // 标注点的纬度
      longitude: 111.184761, // 标注点的经度
      iconPath: "/miniprogram/images/icons/position.png", // 标注点的图标路径
      width: 20, // 图标的宽度
      height: 30, // 图标的高度
      callout: { // 标注点的气泡提示
        content: "创业讲座",
        color: "#000",
        fontSize: 14,
        bgColor: "#fff",
        padding: 5,
        borderRadius: 5,
        display: "ALWAYS" //'BYCLICK':点击显示; 'ALWAYS':常显
      }
    }],
    // 新增协议功能的数据：
    showAgreementModal: false,
    agreed: false,
    // signature: null,
    // agreementContent: "此处为协议内容...",
    agreementText: '本协议由用户与平台之间就服务的使用等相关事项订立的有效合约。使用服务前，请您务必审慎阅读、充分理解本协议各条款内容。\n\n1. 服务内容\n本服务提供电子签名功能，允许用户在数字文档上进行签名操作。\n\n2. 用户责任\n用户应当对自己的签名行为负责，保证签名的真实性和有效性。\n\n3. 隐私保护\n我们将按照隐私政策收集、使用、储存和分享您的个人信息。我们不会将您的签名用于非授权用途。\n\n4. 免责声明\n平台不对因用户提供错误信息或不当使用服务造成的后果承担责任。\n\n5. 协议修改\n本平台有权在必要时修改本协议条款，请您定期查阅最新条款。',
    ctx: null,
    canvasWidth: 0,
    canvasHeight: 0,
    points: [],
    isPainting: false,
    lineWidth: 4,
    lineColor: '#000000',
    hasSigned: false,
    tempFilePath: "", // 合成后的图片
    signCanvas: null,
    compCanvas: null,
    compCtx: null,
    // ctx: null,
    // points: [],
    // 用户信息
    nickName: '',
    real_name: '',
    finalImage: '', // 合成后的图片路径
    signImage: '', // 签字的图片路径
    active_pic: "", // 活动图片地址
    showImage: true,
  },
  // 勾选协议
  toggleAgreement(e) {
    this.setData({
      agreed: !this.data.agreed
    })
    console.log(this.data.agreed)
  },
  // 通过活动的id从而获取此活动的详细信息
  active_info() {
    wx.cloud.database().collection('actives').doc(this.data.active_id)
      .get({
        success: (res) => {
          console.log("数据请求成功", res)
          const active_info = res.data
          const active_name = res.data.name
          const active_pic = res.data.pic
          const new_markers = this.data.markers
          new_markers[0].latitude = res.data.latitude
          new_markers[0].longitude = res.data.longitude
          new_markers[0].callout.content = res.data.name

          this.setData({
            active_info,
            active_name,
            active_pic,
            markers: new_markers,
            latitude: res.data.latitude,
            longitude: res.data.longitude,
            // showImage: false,
          })
          // 设置导航栏标题
          wx.setNavigationBarTitle({
            title: res.data.name,
          })
        },
        fail(err) {
          console.log("数据请求失败", err)
        }
      })
  },
  // 通过内存中的openid来获取到登录用户的信息
  user_info() {
    const db = wx.cloud.database()
    wx.getStorage({
      key: 'openid', // 需要获取的缓存 key
      success: (res) => {
        const openid = res.data
        // 获取用户信息
        db.collection('users').where({
            _openid: openid
          })
          .get()
          .then((res) => {
            console.log('获取成功：', res.data)
            const nickName = res.data[0].nickName;
            const real_name = res.data[0].real_name;
            this.setData({
              nickName,
              real_name
            })
          })
          .catch((err) => {
            console.log('获取失败：', err)
          })
      },
      fail(err) {
        console.error('获取缓存失败', err);
      }
    });
  },
  // 跳转到导航页面
  go_navigation() {
    wx.navigateTo({
      url: `/pages/navigation/navigation?_id=${this.data.active_id}`,
    })
  },
  // 立即报名的活动--按钮
  // 报名入口函数
  entry() {
    wx.showModal({
      title: '提示',
      content: '确定报名此活动吗',
      success: async (res) => {
        if (res.confirm) {
          const {
            active_id,
            user_id,
          } = this.data;

          // 检查是否重复报名（排除已删除的记录）
          const db = wx.cloud.database()
          const _ = db.command
          if (!this.data.user_id) {
            wx.showToast({
              title: '请先登录',
              icon: 'error'
            });
            return;
          }
          const {
            total
          } = await db.collection('active_user')
            .where(_.and([{
                active_id
              },
              {
                user_id
              },
              _.or([{
                  isDeleted: _.neq(true),
                  isRevoke: _.neq(true),
                }, // 条件1：isdelete不等于true
                {
                  isDeleted: _.exists(false),
                  isRevoke: _.exists(false)
                } // 条件2：isdelete字段不存在（兼容旧数据）
              ])
            ]))
            .count()
          if (total > 0) {
            wx.showToast({
              title: '您已报过名了',
              icon: 'error'
            });
            return this.closeModal();
          }
          // 显示协议签署弹窗
          this.setData({
            showAgreementModal: true,
            // 清空之前的数据
            agreed: false,
            // signature: null
          });
          this.initCanvas()
        }
      }
    });
  },

  // 初始化画布
  // 初始化签名画布,如果未初始化则不能签字
  initCanvas() {
    const _this = this;
    const query = wx.createSelectorQuery();
    // const query = wx.createSelectorQuery().in(this); // 添加.in(this)
    // 初始化签字画布--第一个画布
    query.select('#signatureCanvas')
      .fields({
        node: true,
        size: true
      })
      .exec((res) => {
        console.log(res) // [null]
        const canvas = res[0].node;
        // const canvas = res;
        const ctx = canvas.getContext('2d');

        // 设置canvas尺寸
        canvas.width = _this.data.canvasWidth * wx.getSystemInfoSync().pixelRatio;
        canvas.height = _this.data.canvasHeight * wx.getSystemInfoSync().pixelRatio;
        ctx.scale(wx.getSystemInfoSync().pixelRatio, wx.getSystemInfoSync().pixelRatio);

        // 设置默认绘图样式
        ctx.lineWidth = _this.data.lineWidth;
        ctx.lineJoin = 'round';
        ctx.lineCap = 'round';
        ctx.strokeStyle = _this.data.lineColor;

        _this.setData({
          ctx,
          signCanvas: canvas
        });

        // 清空画布
        _this.clearCanvas();
      });

    // 初始化合成画布--第二个画布
    query.select('#compositeCanvas')
      .fields({
        node: true,
        size: true
      })
      .exec((res) => {
        console.log(res)
        const canvas = res[1].node;
        const ctx = canvas.getContext('2d');
        const systemInfo = wx.getWindowInfo();
        const pixelRatio = systemInfo.pixelRatio; // 最新属性名
        // 设置合成canvas尺寸
        // canvas.width = _this.data.canvasWidth * wx.getSystemInfoSync().pixelRatio;
        // canvas.height = _this.data.canvasHeight * wx.getSystemInfoSync().pixelRatio;
        canvas.width = _this.data.canvasWidth * pixelRatio;
        canvas.height = _this.data.canvasHeight * pixelRatio + 1500;
        // ctx.scale(wx.getSystemInfoSync().pixelRatio, wx.getSystemInfoSync().pixelRatio);
        ctx.scale(pixelRatio, pixelRatio);
        console.log("宽：：：：", canvas.width, "高：：：", canvas.height)
        _this.setData({
          compCtx: ctx,
          compCanvas: canvas
        });
      });
  },

  // 签名开始
  handleTouchStart(e) {
    const {
      agreed
    } = this.data
    if (!agreed) return wx.showToast({
      title: '请同意协议',
      icon: 'none'
    });
    const {
      ctx
    } = this.data;
    const {
      x,
      y
    } = e.touches[0];

    // 开始新的绘制路径
    ctx.beginPath();
    ctx.moveTo(x, y);

    this.setData({
      isPainting: true,
      points: [
        [x, y]
      ], // 记录起始点
      hasSigned: true // 用户开始签名，标记为已签名
    });

  },

  // 签名过程
  handleTouchMove(e) {
    if (!this.data.isPainting) return;
    const {
      ctx,
      points
    } = this.data;
    const {
      x,
      y
    } = e.touches[0];

    // 添加新的点到路径
    points.push([x, y]);

    // 如果只有两个点，直接连线
    if (points.length < 3) {
      ctx.lineTo(x, y);
    } else {
      // 使用贝塞尔曲线，使线条更平滑
      const lastPoint = points[points.length - 2];
      const controlPoint = lastPoint;
      const endPoint = {
        x: (lastPoint[0] + x) / 2,
        y: (lastPoint[1] + y) / 2
      };

      ctx.quadraticCurveTo(
        controlPoint[0],
        controlPoint[1],
        endPoint.x,
        endPoint.y
      );
    }
    ctx.stroke();
    this.setData({
      points
    });
  },

  // 签名结束
  handleTouchEnd() {
    const {
      ctx,
      points
    } = this.data;
    if (points.length < 3) {

      // 如果点太少，绘制一个点
      const point = points[0];
      ctx.lineTo(point[0] + 0.1, point[1] + 0.1);
      ctx.stroke();
    }
    this.setData({
      isPainting: false
    });

  },

  // 合成协议和签名
  composeImage: function () {
    return new Promise((resolve, reject) => {
      const {
        compCtx,
        canvasWidth,
        canvasHeight,
        agreementText,
        signCanvas
      } = this.data;

      // 清空合成画布
      compCtx.clearRect(0, 0, canvasWidth, canvasHeight);

      // 设置背景色
      compCtx.fillStyle = '#FFFFFF';
      compCtx.fillRect(0, 0, canvasWidth, canvasHeight);

      // 绘制标题
      compCtx.fillStyle = '#000000';
      compCtx.font = 'bold 20px sans-serif';
      compCtx.textAlign = 'center';
      compCtx.fillText('用户协议', canvasWidth / 2, 40);

      // 绘制协议内容
      compCtx.font = '14px sans-serif';
      compCtx.textAlign = 'left';

      const textLines = this.wrapText(agreementText, canvasWidth - 40, compCtx);
      let y = 80;

      textLines.forEach(line => {
        compCtx.fillText(line, 20, y);
        y += 20; // 行间距
      });

      // 绘制签名区域标题
      y += 20;
      compCtx.font = 'bold 16px sans-serif';
      compCtx.fillText('签名:', 20, y);

      // 绘制签名区域边框
      y += 10;
      compCtx.strokeStyle = '#CCCCCC';
      compCtx.lineWidth = 1;
      compCtx.strokeRect(20, y, canvasWidth - 40, 150);

      // 将签名画布内容绘制到合成画布
      compCtx.drawImage(signCanvas, 20, y, canvasWidth - 40, 150);

      // 绘制日期
      const date = new Date();
      const dateStr = `日期: ${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
      y += 160;
      compCtx.font = '14px sans-serif';
      compCtx.fillText(dateStr, 20, y);
      
      resolve();
    });
  },

  // 文本自动换行处理
  wrapText(text, maxWidth, context) {
    const paragraphs = text.split('\n');
    const lines = [];

    paragraphs.forEach(paragraph => {
      if (paragraph === '') {
        lines.push('');
        return;
      }

      const words = paragraph.split('');
      let line = '';

      for (let i = 0; i < words.length; i++) {
        const testLine = line + words[i];
        const metrics = context.measureText(testLine);
        const testWidth = metrics.width;

        if (testWidth > maxWidth && i > 0) {
          lines.push(line);
          line = words[i];
        } else {
          line = testLine;
        }
      }

      lines.push(line);
    });

    return lines;
  },

  // 合成图片---保存签名
  saveSignature: function () {
    const _this = this;
    const {
      compCanvas,
      hasSigned,
      signCanvas
    } = this.data;

    if (!hasSigned) {
      wx.showToast({
        title: '请先完成签名',
        icon: 'none'
      });
      return;
    }

    wx.showLoading({
      title: '正在生成文档',
    });
    // 先获取临时文件路径
    wx.canvasToTempFilePath({
      canvas: signCanvas,
      success: (res) => {
        const signImage = res.tempFilePath
        this.setData({
          signImage
        })
        console.log("签字的图片", res.tempFilePath)
        wx.showToast({
          title: '保存成功',
          icon: 'success'
        });
      },
      fail(err) {
        console.error('导出图片失败:', err);
        wx.showToast({
          title: '保存失败',
          icon: 'none'
        });
      }
    });
    this.composeImage()
      .then(() => {
        // 导出为图片
        wx.canvasToTempFilePath({
          canvas: compCanvas,
          success: (res) => {
            wx.hideLoading();
            const tempFilePath = res.tempFilePath
            this.setData({
              finalImage: tempFilePath,
            })
            console.log("合成的图片", res.tempFilePath)
          },
          fail(err) {
            wx.hideLoading();
            console.error('导出图片失败:', err);
            wx.showToast({
              title: '导出失败',
              icon: 'none'
            });
          }
        });
      })
      .catch(err => {
        wx.hideLoading();
        console.error('合成图片失败:', err);
        wx.showToast({
          title: '合成失败',
          icon: 'none'
        });
      })
  },

  // 清除画布的方法
  clearCanvas() {
    const {
      ctx,
      canvasWidth,
      canvasHeight
    } = this.data;
    if (ctx) {
      ctx.clearRect(0, 0, canvasWidth, canvasHeight);
      this.setData({
        hasSigned: false
      })
    }
  },

  // 提交验证
  // 提交表单（整合签名和报名）
  async submitForm() {
    const {
      agreed,
      signature,
      active_id,
      user_id,
      active_name,
      nickName,
      real_name,
      finalImage,
      signImage,
      hasSigned,
    } = this.data;
    // 表单验证
    if (!agreed) return wx.showToast({
      title: '请同意协议',
      icon: 'none'
    });
    if (!hasSigned) return wx.showToast({
      title: '请完成签名',
      icon: 'none'
    });

    try {
      wx.showLoading({
        title: '检查报名状态...',
        mask: true // 防止背景点击
      });
      // 检查是否重复报名（排除已删除的记录）
      const db = wx.cloud.database()
      const _ = db.command

      const {
        total
      } = await db.collection('active_user')
        // _.and([...]) // 表示所有条件必须同时满足
        // _.or([...])  // 表示任意条件满足即可
        .where(_.and([{
            active_id
          },
          {
            user_id
          },
          _.or([{
              isDeleted: _.neq(true),
              isRevoke: _.neq(true)
            }, // 条件1：isdelete不等于true
            {
              isDeleted: _.exists(false),
              isRevoke: _.exists(false)
            } // 条件2：isdelete字段不存在（兼容旧数据）
          ])
        ]))
        .count()
      // 文件上传优化：合并加载提示和进度反馈
      wx.showLoading({
        title: '上传文件中...',
        mask: true
      });

      // 上传签名的图片
      const uploadRes_sign = await wx.cloud.uploadFile({
        cloudPath: `sign_images/${Date.now()}_${user_id}.png`,
        filePath: signImage,
      });

      // 获取图片下载地址
      const fileID_sign = uploadRes_sign.fileID;
      const fileURL = await wx.cloud.getTempFileURL({
        fileList: [fileID_sign]
      });

      const fileURLSign = fileURL.fileList[0].tempFileURL;
      console.log('签名图片下载地址:', fileURLSign);

      // 上传签名合并过的图片
      const uploadRes_final = await wx.cloud.uploadFile({
        cloudPath: `final_images/${Date.now()}_${user_id}.png`,
        filePath: finalImage,
      });

      // 获取图片下载地址
      const fileID_final = uploadRes_final.fileID;
      const fileURLRes = await wx.cloud.getTempFileURL({
        fileList: [fileID_final]
      });

      const fileURLFinal = fileURLRes.fileList[0].tempFileURL;
      console.log('合成图片下载地址:', fileURLFinal);

      // 显示加载提示
      // 数据提交优化：添加超时和进度反馈
      wx.showLoading({
        title: '提交数据中...',
        mask: true
      });
      // 写入数据库（包含签名文件ID）
      await db.collection('active_user').add({
        data: {
          active_id,
          user_id,
          active_name,
          nickName,
          real_name,
          agree_time: db.serverDate(), // 协议同意时间
          device_info: wx.getSystemInfoSync(), // 记录设备信息
          finalImage: fileURLFinal, // 合并后的图片地址
          signImage: fileURLSign, // 签字的图片地址
        },
        success: (res) => {
          wx.hideLoading()
          wx.showToast({
            title: '报名成功',
            icon: 'success',
          });
          this.setData({
            agreed: false,
            showAgreementModal: false,
          })
          this.clearCanvas()
        }
      });

    } catch (err) {
      wx.hideLoading()
      console.error('报名失败:', err);
      wx.showToast({
        title: '报名失败',
        icon: 'error'
      });
    }
  },

  // 取消弹框的方法
  closeModal() {
    this.setData({
      showAgreementModal: false
    })
  },
  // 运用插件的方式去进行路线规划
  // 正确初始化方式--插件
  // 点击事件处理函数
  handleNavigateToRoutePlan() {
    // 确保已经申请并填写正确的参数
    let plugin = requirePlugin('routePlan');
    let key = 'GDOBZ-2LLCW-Z26RL-3PJU4-MRYCK-N4BOP'; // 替换为实际key
    let referer = '校园活动'; // 替换为小程序名称

    // 终点参数（示例为北京西站吉野家）
    const endPoint = {
      name: this.data.active_name,
      latitude: this.data.latitude,
      longitude: this.data.longitude
    };
    // 添加错误处理
    wx.navigateTo({
      url: `plugin://routePlan/index?key=${key}&referer=${referer}&endPoint=${JSON.stringify(endPoint)}`,
      fail(err) {
        console.error('导航跳转失败:', err)
        wx.showToast({
          title: '导航功能暂不可用',
          icon: 'none'
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 进入页面时显示加载提示
    wx.showLoading({
      title: '加载中...',
      mask: true // 可选：添加遮罩层防止误操作
    });
    console.log('接收到的参数:', options);
    const _id = options._id
    this.setData({
      active_id: _id,
      showAgreementModal: false
    },()=>{
      wx.hideLoading()
    })
    // 在钩子函数中调用数据函数
    this.active_info()
    this.user_info()
    // 获取内存中的用户id
    wx.getStorage({
      key: "user_id",
      success: (res) => {
        console.log(res)
        const user_id = res.data;
        this.setData({
          user_id
        })
      },
      fail(err) {
        console.log(err)
      }
    })
    // 获取用户当前位置
    wx.getLocation({
      type: 'wgs84',
      success: (res) => {
        console.log('用户的位置', res);
        this.setData({
          // longitude: res.longitude,
          // latitude: res.latitude,
        });
        console.log("用户位置：", res.longitude, res.latitude)
      },
      fail: (err) => {
        console.error('获取位置失败', err);
        if (err.errMsg === 'getLocation:fail auth deny') {
          wx.showModal({
            title: '提示',
            content: '需要授权位置权限才能使用地图功能',
            showCancel: false,
            success: () => {
              wx.openSetting({
                success(settingdata) {
                  if (settingdata.authSetting['scope.userLocation']) {
                    // 用户重新授权后，重新获取位置
                    wx.getLocation({
                      type: 'wgs84',
                      success: (res) => {
                        // this.setData({
                        //   longitude: res.longitude,
                        //   latitude: res.latitude,
                        // });
                      }
                    });
                  }
                }
              });
            }
          });
        }
      }
    });
    // 显示加载框
    // wx.showLoading({
    //   title: '加载中...', // 提示文字
    //   mask: true // 显示透明蒙层，防止触摸穿透
    // });
    // 初始化Canvas
    // this.initCanvas();
  },

  onReady() {
    // 使用 SelectorQuery 获取 Canvas 的实际位置和节点
    // 获取系统信息以适应不同屏幕大小
    wx.getSystemInfo({
      success: (res) => {
        // 根据屏幕宽度设置canvas宽高
        const canvasWidth = res.windowWidth - 40; // 减去容器padding
        const canvasHeight = 300; // 固定高度或根据需要调整
        this.setData({
          canvasWidth,
          canvasHeight
        });
      }
    });

    // 初始化Canvas
    // this.initCanvas();
  },

  // 图片懒加载的问题
  onImagesLoaded() {
    console.log("图片加载完成", this.data)
    // 在图片加载完成后，设置 showImage 为 true，显示图片
    this.setData({
      showImage: false
    })
  },
  onImageError: (error) => {
    console.error('图片加载失败',error)
    wx.showToast({
      title: '图片加载失败',
      icon:"error"
    })
  }
})